<!DOCTYPE html>
<html lang="en">

<head>
    <title>My BCIT Project</title>
    <meta name="comp2800 template" content="My 2800 App">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
    </script>

    <!-- Firebase 8 Library related CSS, JS, JQuery go here -->
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Inter&display=swap" rel="stylesheet" />
    <link href="styles/main.css" rel="stylesheet" />
    <!-- Bootstrap Library CSS JS CDN go here -->


    <!-- Other libraries and styles of your own -->
    <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
    <!-- <link rel="stylesheet" href="./styles/style.css"> -->
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

        body {
            font-family: 'Inter', sans-serif;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 16px;
        }

        .card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            padding: 24px;
            margin-bottom: 24px;
        }

        .input-group {
            margin-bottom: 16px;
        }

        input[type="number"],
        select {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            font-size: 1rem;
            margin-top: 4px;
        }

        button {
            background: #3B82F6;
            color: white;
            padding: 14px 32px;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            cursor: pointer;
            transition: transform 0.2s ease;
        }

        button:hover {
            transform: translateY(-2px);
        }

        .result-item {
            background: #f3f4f6;
            border-radius: 12px;
            padding: 20px;
            margin: 16px 0;
        }

        .result-value {
            font-size: 2.5rem;
            font-weight: 600;
            color: #1F2937;
        }

        /* 新增：运动计划和饮食建议样式 */
        .recommendation-card {
            margin-top: 24px;
        }

        .recommendation-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
        }

        .recommendation-title i {
            margin-right: 8px;
        }

        .exercise-item,
        .meal-item {
            background: #f9fafb;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
        }

        .exercise-item i,
        .meal-item i {
            font-size: 1.5rem;
            margin-right: 16px;
            min-width: 30px;
            text-align: center;
        }

        .exercise-details,
        .meal-details {
            flex: 1;
        }

        .exercise-name,
        .meal-name {
            font-weight: 600;
            margin-bottom: 4px;
        }

        .exercise-calories,
        .meal-calories {
            font-size: 0.9rem;
            color: #6b7280;
        }

        .meal-nutrition {
            font-size: 0.9rem;
            color: #4b5563;
            margin-top: 4px;
        }

        .day-section {
            margin-bottom: 24px;
        }

        .day-title {
            font-weight: 600;
            font-size: 1.2rem;
            margin-bottom: 12px;
            padding-bottom: 4px;
            border-bottom: 1px solid #e5e7eb;
        }
    </style>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color: skyblue; min-height: 64px;">
        <div class="container-fluid">
            <a class="navbar-brand d-flex align-items-center" href="#">
                <img src="../images/biaoti.png" height="36" class="me-2">
                bot
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link" href="../aboutus.html">About Us</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="../main.html">Health</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="../history.html">History</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="../delete_user.html">Delete</a>
                    </li>
                </ul>
                <div class="d-flex">
                    <a class="btn btn-outline-success" href="../login.html">Log Out</a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 使用padding-top避免内容被导航栏遮挡 -->
    <div class="container pt-48"> <!-- 原pt-20改为pt-48 -->
        <header class="text-center mb-12">
            <h1 class="text-2xl font-bold text-neutral">
                <i class="fa-solid fa-fire text-accent mr-2"></i>Calorie Calculator
            </h1>
            <p class="text-gray-600">Accurately estimate your daily calorie needs</p>
        </header>

        <div class="card">
            <form id="calculatorForm">
                <div class="input-group">
                    <label class="block text-sm font-medium text-gray-700">Gender</label>
                    <div class="flex space-x-4 mt-2">
                        <label class="flex items-center cursor-pointer">
                            <input type="radio" name="gender" value="male" checked>
                            <span class="w-5 h-5 border rounded-full mr-2 border-gray-300 flex items-center justify-center">
                                <span class="w-3 h-3 bg-blue-500 rounded-full scale-0 peer-checked:scale-100 transition-transform"></span>
                            </span>
                            Male
                        </label>
                        <label class="flex items-center cursor-pointer">
                            <input type="radio" name="gender" value="female">
                            <span class="w-5 h-5 border rounded-full mr-2 border-gray-300 flex items-center justify-center">
                                <span class="w-3 h-3 bg-blue-500 rounded-full scale-0 peer-checked:scale-100 transition-transform"></span>
                            </span>
                            Female
                        </label>
                    </div>
                </div>

                <div class="input-group">
                    <label class="block text-sm font-medium text-gray-700">Age (years)</label>
                    <input type="number" id="age" name="age" min="1" max="120" value="30" class="mt-2">
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="input-group">
                        <label class="block text-sm font-medium text-gray-700">Height (cm)</label>
                        <input type="number" id="height" name="height" min="50" max="250" value="170" class="mt-2">
                    </div>

                    <div class="input-group">
                        <label class="block text-sm font-medium text-gray-700">Weight (kg)</label>
                        <input type="number" id="weight" name="weight" min="10" max="300" value="70" class="mt-2">
                    </div>
                </div>

                <div class="input-group">
                    <label class="block text-sm font-medium text-gray-700">Activity Level</label>
                    <select id="activityLevel" name="activityLevel" class="mt-2">
                        <option value="sedentary">Sedentary</option>
                        <option value="lightly">Lightly Active</option>
                        <option value="moderately" selected>Moderately Active</option>
                        <option value="very">Very Active</option>
                        <option value="extra">Extra Active</option>
                    </select>
                </div>

                <div class="input-group">
                    <label class="block text-sm font-medium text-gray-700">Goal</label>
                    <div class="flex space-x-4 mt-2">
                        <label class="flex items-center cursor-pointer">
                            <input type="radio" name="goal" value="lose" checked>
                            <span class="w-5 h-5 border rounded-full mr-2 border-gray-300 flex items-center justify-center">
                                <span class="w-3 h-3 bg-green-500 rounded-full scale-0 peer-checked:scale-100 transition-transform"></span>
                            </span>
                            Lose Weight
                        </label>
                        <label class="flex items-center cursor-pointer">
                            <input type="radio" name="goal" value="maintain">
                            <span class="w-5 h-5 border rounded-full mr-2 border-gray-300 flex items-center justify-center">
                                <span class="w-3 h-3 bg-blue-500 rounded-full scale-0 peer-checked:scale-100 transition-transform"></span>
                            </span>
                            Maintain Weight
                        </label>
                        <label class="flex items-center cursor-pointer">
                            <input type="radio" name="goal" value="gain">
                            <span class="w-5 h-5 border rounded-full mr-2 border-gray-300 flex items-center justify-center">
                                <span class="w-3 h-3 bg-orange-500 rounded-full scale-0 peer-checked:scale-100 transition-transform"></span>
                            </span>
                            Gain Weight
                        </label>
                    </div>
                </div>

                <button type="submit" class="w-full mt-6">
                    <i class="fa-solid fa-calculator mr-2"></i> Calculate Calorie Needs
                </button>
            </form>
        </div>

        <div class="card" id="resultCard" style="display: none;">
            <div class="result-item">
                <h3 class="text-sm font-medium text-gray-600 mb-2">Basal Metabolic Rate (BMR)</h3>
                <div class="flex items-center justify-between">
                    <span class="result-value" id="bmrResult">1680</span>
                    <span class="text-sm text-gray-500">kcal/day</span>
                </div>
            </div>

            <div class="result-item">
                <h3 class="text-sm font-medium text-gray-600 mb-2">Total Daily Energy Expenditure (TDEE)</h3>
                <div class="flex items-center justify-between">
                    <span class="result-value" id="tdeeResult">2240</span>
                    <span class="text-sm text-gray-500">kcal/day</span>
                </div>
            </div>

            <div class="result-item">
                <h3 class="text-sm font-medium text-gray-600 mb-2">Goal Calories</h3>
                <div class="flex items-center justify-between">
                    <span class="result-value text-green-500" id="goalCalories">1740</span>
                    <span class="text-sm text-gray-500">kcal/day</span>
                </div>
            </div>

            <!-- 新增：运动计划 -->
            <div class="recommendation-card">
                <h3 class="recommendation-title text-blue-600">
                    <i class="fa-solid fa-dumbbell"></i> Personalized Exercise Plan
                </h3>
                <div id="exercisePlan"></div>
            </div>

            <!-- 新增：饮食建议 -->
            <div class="recommendation-card">
                <h3 class="recommendation-title text-green-600">
                    <i class="fa-solid fa-utensils"></i> Recommended Diet Plan
                </h3>
                <div id="mealPlan"></div>
            </div>
        </div>
    </div>

    <script>
        const form = document.getElementById('calculatorForm');
        const resultCard = document.getElementById('resultCard');

        form.addEventListener('submit', (e) => {
            e.preventDefault();
            calculateCalories();
            resultCard.style.display = 'block';
            resultCard.scrollIntoView({ behavior: 'smooth' });
        });

        function calculateCalories() {
            const gender = document.querySelector('input[name="gender"]:checked').value;
            const age = parseInt(document.getElementById('age').value);
            const height = parseInt(document.getElementById('height').value);
            const weight = parseInt(document.getElementById('weight').value);
            const activity = document.getElementById('activityLevel').value;
            const goal = document.querySelector('input[name="goal"]:checked').value;

            // Harris-Benedict公式计算BMR
            let bmr = gender === 'male'
                ? 88.362 + 13.397 * weight + 4.799 * height - 5.677 * age
                : 447.593 + 9.247 * weight + 3.098 * height - 4.330 * age;

            // 活动系数
            const activityFactors = {
                sedentary: 1.2,
                lightly: 1.375,
                moderately: 1.55,
                very: 1.725,
                extra: 1.9
            };
            const tdee = bmr * activityFactors[activity];

            // 目标调整
            let goalCal = goal === 'lose' ? tdee - 500 : goal === 'gain' ? tdee + 500 : tdee;
            goalCal = Math.max(goalCal, 1200); // 最低摄入限制

            // 更新结果
            document.getElementById('bmrResult').textContent = bmr.toFixed(0);
            document.getElementById('tdeeResult').textContent = tdee.toFixed(0);
            document.getElementById('goalCalories').textContent = goalCal.toFixed(0);

            // 生成运动计划和饮食建议
            generateExercisePlan(goal, tdee, weight);
            generateMealPlan(goalCal);
        }

        // 生成运动计划
        function generateExercisePlan(goal, tdee, weight) {
            const exercisePlanElement = document.getElementById('exercisePlan');
            exercisePlanElement.innerHTML = '';

            // 根据目标和TDEE生成不同的运动计划
            let exercisePlan;

            if (goal === 'lose') {
                exercisePlan = [
                    {
                        day: "Monday",
                        exercises: [
                            { name: "Brisk Walking", duration: "45 minutes", calories: Math.round(3.5 * weight * 0.75) },
                            { name: "Core Training", duration: "20 minutes", calories: Math.round(3 * weight * 0.33) }
                        ]
                    },
                    {
                        day: "Tuesday",
                        exercises: [
                            { name: "Jogging", duration: "30 minutes", calories: Math.round(7 * weight * 0.5) },
                            { name: "Upper Body Strength Training", duration: "30 minutes", calories: Math.round(4 * weight * 0.5) }
                        ]
                    },
                    {
                        day: "Wednesday",
                        exercises: [
                            { name: "Rest Day or Yoga", duration: "30 minutes", calories: Math.round(2.5 * weight * 0.5) }
                        ]
                    },
                    {
                        day: "Thursday",
                        exercises: [
                            { name: "Cycling", duration: "40 minutes", calories: Math.round(5 * weight * 0.67) },
                            { name: "Core Training", duration: "20 minutes", calories: Math.round(3 * weight * 0.33) }
                        ]
                    },
                    {
                        day: "Friday",
                        exercises: [
                            { name: "Swimming", duration: "30 minutes", calories: Math.round(7 * weight * 0.5) },
                            { name: "Lower Body Strength Training", duration: "30 minutes", calories: Math.round(4.5 * weight * 0.5) }
                        ]
                    },
                    {
                        day: "Saturday",
                        exercises: [
                            { name: "Aerobic Dance", duration: "45 minutes", calories: Math.round(5 * weight * 0.75) }
                        ]
                    },
                    {
                        day: "Sunday",
                        exercises: [
                            { name: "Rest Day or Walking", duration: "60 minutes", calories: Math.round(2.5 * weight * 1) }
                        ]
                    }
                ];
            } else if (goal === 'maintain') {
                exercisePlan = [
                    {
                        day: "Monday",
                        exercises: [
                            { name: "Jogging", duration: "30 minutes", calories: Math.round(7 * weight * 0.5) },
                            { name: "Full-Body Strength Training", duration: "30 minutes", calories: Math.round(4 * weight * 0.5) }
                        ]
                    },
                    {
                        day: "Tuesday",
                        exercises: [
                            { name: "Cycling", duration: "45 minutes", calories: Math.round(5 * weight * 0.75) }
                        ]
                    },
                    {
                        day: "Wednesday",
                        exercises: [
                            { name: "Rest Day or Stretching", duration: "30 minutes", calories: Math.round(2 * weight * 0.5) }
                        ]
                    },
                    {
                        day: "Thursday",
                        exercises: [
                            { name: "Swimming", duration: "30 minutes", calories: Math.round(7 * weight * 0.5) },
                            { name: "Core Training", duration: "20 minutes", calories: Math.round(3 * weight * 0.33) }
                        ]
                    },
                    {
                        day: "Friday",
                        exercises: [
                            { name: "HIIT Training", duration: "25 minutes", calories: Math.round(9 * weight * 0.42) },
                            { name: "Upper Body Strength Training", duration: "25 minutes", calories: Math.round(4 * weight * 0.42) }
                        ]
                    },
                    {
                        day: "Saturday",
                        exercises: [
                            { name: "Hiking", duration: "90 minutes", calories: Math.round(4 * weight * 1.5) }
                        ]
                    },
                    {
                        day: "Sunday",
                        exercises: [
                            { name: "Rest Day or Yoga", duration: "45 minutes", calories: Math.round(2.5 * weight * 0.75) }
                        ]
                    }
                ];
            } else { // gain
                exercisePlan = [
                    {
                        day: "Monday",
                        exercises: [
                            { name: "Chest and Triceps Strength Training", duration: "60 minutes", calories: Math.round(5 * weight * 1) }
                        ]
                    },
                    {
                        day: "Tuesday",
                        exercises: [
                            { name: "Jogging", duration: "20 minutes", calories: Math.round(7 * weight * 0.33) },
                            { name: "Core Training", duration: "20 minutes", calories: Math.round(3 * weight * 0.33) }
                        ]
                    },
                    {
                        day: "Wednesday",
                        exercises: [
                            { name: "Back and Biceps Strength Training", duration: "60 minutes", calories: Math.round(5 * weight * 1) }
                        ]
                    },
                    {
                        day: "Thursday",
                        exercises: [
                            { name: "Cycling", duration: "30 minutes", calories: Math.round(5 * weight * 0.5) }
                        ]
                    },
                    {
                        day: "Friday",
                        exercises: [
                            { name: "Legs and Shoulders Strength Training", duration: "60 minutes", calories: Math.round(5.5 * weight * 1) }
                        ]
                    },
                    {
                        day: "Saturday",
                        exercises: [
                            { name: "HIIT Training", duration: "30 minutes", calories: Math.round(9 * weight * 0.5) }
                        ]
                    },
                    {
                        day: "Sunday",
                        exercises: [
                            { name: "Rest Day or Light Stretching", duration: "30 minutes", calories: Math.round(2 * weight * 0.5) }
                        ]
                    }
                ];
            }

            // 计算每日总消耗
            exercisePlan.forEach(day => {
                day.totalCalories = day.exercises.reduce((sum, exercise) => sum + exercise.calories, 0);
            });

            // 渲染运动计划
            exercisePlan.forEach(day => {
                const dayElement = document.createElement('div');
                dayElement.className = 'day-section';
                dayElement.innerHTML = `
                    <div class="day-title">${day.day} - Burns approx ${day.totalCalories} Calories</div>
                    ${day.exercises.map(exercise => `
                        <div class="exercise-item">
                            <i class="fa-solid fa-running text-blue-500"></i>
                            <div class="exercise-details">
                                <div class="exercise-name">${exercise.name}</div>
                                <div class="exercise-calories">${exercise.duration} (Approx ${exercise.calories} Calories)</div>
                            </div>
                        </div>
                    `).join('')}
                `;
                exercisePlanElement.appendChild(dayElement);
            });
        }

        // 生成饮食建议
        function generateMealPlan(goalCalories) {
            const mealPlanElement = document.getElementById('mealPlan');
            mealPlanElement.innerHTML = '';

            // 根据目标卡路里生成不同的饮食计划
            let mealPlan;

            // 计算每餐的大致卡路里
            const breakfastCal = Math.round(goalCalories * 0.25);
            const lunchCal = Math.round(goalCalories * 0.35);
            const dinnerCal = Math.round(goalCalories * 0.3);
            const snackCal = Math.round((goalCalories - breakfastCal - lunchCal - dinnerCal) / 2);

            mealPlan = {
                breakfast: [
                    {
                        name: "Oatmeal with Fruits",
                        calories: breakfastCal,
                        nutrition: "Protein: 15g, Carbs: 50g, Fat: 10g"
                    },
                    {
                        name: "Whole Wheat Toast with Eggs and Avocado",
                        calories: breakfastCal,
                        nutrition: "Protein: 20g, Carbs: 30g, Fat: 15g"
                    },
                    {
                        name: "Greek Yogurt with Nuts and Berries",
                        calories: breakfastCal,
                        nutrition: "Protein: 25g, Carbs: 30g, Fat: 10g"
                    }
                ],
                lunch: [
                    {
                        name: "Grilled Chicken Salad",
                        calories: lunchCal,
                        nutrition: "Protein: 30g, Carbs: 40g, Fat: 15g"
                    },
                    {
                        name: "Salmon with Brown Rice and Steamed Vegetables",
                        calories: lunchCal,
                        nutrition: "Protein: 25g, Carbs: 45g, Fat: 20g"
                    },
                    {
                        name: "Lean Beef Stir-Fry with Broccoli and Buckwheat Noodles",
                        calories: lunchCal,
                        nutrition: "Protein: 28g, Carbs: 50g, Fat: 12g"
                    }
                ],
                dinner: [
                    {
                        name: "Roasted Chicken Thigh with Sweet Potatoes and Roasted Asparagus",
                        calories: dinnerCal,
                        nutrition: "Protein: 25g, Carbs: 35g, Fat: 15g"
                    },
                    {
                        name: "Shrimp and Tofu Hotpot with Brown Rice",
                        calories: dinnerCal,
                        nutrition: "Protein: 22g, Carbs: 30g, Fat: 18g"
                    },
                    {
                        name: "Vegetable and Tofu Soup with Whole Wheat Bread",
                        calories: dinnerCal,
                        nutrition: "Protein: 18g, Carbs: 40g, Fat: 10g"
                    }
                ],
                snacks: [
                    {
                        name: "Nuts and Dried Fruits",
                        calories: snackCal,
                        nutrition: "Protein: 5g, Carbs: 15g, Fat: 10g"
                    },
                    {
                        name: "Greek Yogurt",
                        calories: snackCal,
                        nutrition: "Protein: 10g, Carbs: 5g, Fat: 0g"
                    },
                    {
                        name: "Apple with Peanut Butter",
                        calories: snackCal,
                        nutrition: "Protein: 5g, Carbs: 20g, Fat: 10g"
                    }
                ]
            };

            // 渲染饮食计划
            Object.entries(mealPlan).forEach(([mealType, meals]) => {
                const mealTypeName = {
                    breakfast: "Breakfast",
                    lunch: "Lunch",
                    dinner: "Dinner",
                    snacks: "Snacks"
                }[mealType];

                const mealTypeElement = document.createElement('div');
                mealTypeElement.className = 'day-section';
                mealTypeElement.innerHTML = `
                    <div class="day-title">${mealTypeName} - Approx ${mealType === 'snacks' ? snackCal : mealPlan[mealType][0].calories} Calories</div>
                    ${meals.map(meal => `
                        <div class="meal-item">
                            <i class="fa-solid fa-apple-whole text-green-500"></i>
                            <div class="meal-details">
                                <div class="meal-name">${meal.name}</div>
                                <div class="meal-calories">Approx ${meal.calories} Calories</div>
                                <div class="meal-nutrition">${meal.nutrition}</div>
                            </div>
                        </div>
                    `).join('')}
                `;
                mealPlanElement.appendChild(mealTypeElement);
            });
        }
    </script>
    <!-- 引入骨架脚本 -->
    <script src="./scripts/skeleton.js"></script>
</body>

</html>